<template>
  <div class="list bg-white px-3 mb-0">
    <buttonSearch :showSearch="false" class="pt-3">
      <template #left>
        <!-- 左边按钮 -->
        <el-button type="primary" size="mini" @click="openModal(false)"
          >添加规格</el-button
        >
        <el-button type="danger" size="mini" @click="delAll"
          >批量删除</el-button
        >
      </template>
    </buttonSearch>
    <!-- 商品列表 -->
    <el-table
      :data="tableData"
      style="width: 100%; margin-top: 20px; margin-bottom: 60px"
      border
      ref="multipleTable"
      @selection-change="handleSelectionChange"
    >
      <el-table-column
        type="selection"
        width="45"
        align="center"
        @selection-change="handleSelectionChange"
      >
      </el-table-column>
      <el-table-column prop="name" label="规格名称" width="180">
      </el-table-column>
      <el-table-column prop="value" label="规格值" align="center" width="380">
      </el-table-column>
      <el-table-column prop="order" label="排序" align="center" width="180">
      </el-table-column>
      <el-table-column prop="status" label="状态" align="center" width="180">
        <template v-slot="scope">
          <div class="d-flex flex-column align-items-center">
            <el-button
              plain
              :type="scope.row.status ? 'success' : 'danger'"
              size="mini"
              @click="changeStatus(scope.row)"
            >
              {{ scope.row.status ? "启用" : "禁用" }}
            </el-button>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template v-slot="scope">
          <el-button-group class="d-flex align-items-center">
            <el-button
              type="success"
              plain
              size="mini"
              @click="openModal(scope)"
              >编辑</el-button
            >
            <el-button type="danger" plain size="mini" @click="delItem(scope)"
              >删除</el-button
            >
          </el-button-group>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-footer
      class="d-flex align-items-center p-0 border-top position-fixed elFoot"
    >
      <div class="pl-2">
        <el-pagination
          :current-page="currentPage"
          :page-sizes="[10, 20, 50]"
          :page-size="100"
          layout="total, sizes, prev, pager, next, jumper"
          :total="400"
        >
        </el-pagination>
      </div>
    </el-footer>
    <!-- 添加规格对话框 -->
    <el-dialog
      title="添加规格"
      :visible.sync="dialogVisible"
      width="40%"
      top="30px"
    >
      <el-form ref="form" :model="form" label-width="80px" :rules="rules">
        <el-form-item label="规格名称" prop="name">
          <el-input
            v-model="form.name"
            placeholder="规格名称"
            size="mini"
            style="width: 200px"
          ></el-input>
        </el-form-item>
        <el-form-item label="排序">
          <el-input-number
            v-model="form.number"
            :min="1"
            :max="10"
            label="排序"
            size="mini"
          ></el-input-number>
        </el-form-item>
        <el-form-item label="状态">
          <el-radio-group v-model="form.status" size="mini">
            <el-radio :label="true" border>启用</el-radio>
            <el-radio :label="false" border>禁用</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="类型">
          <el-radio-group v-model="form.type" size="mini">
            <el-radio :label="0" border>文字</el-radio>
            <el-radio :label="1" border>颜色</el-radio>
            <el-radio :label="2" border>图片</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="规格值" prop="value">
          <el-input
            type="textarea"
            :rows="3"
            placeholder="请输入内容"
            v-model="form.value"
          >
          </el-input>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import buttonSearch from "@/components/common/button-search";
export default {
  name: "list",
  data() {
    return {
      superSearch: false,
      //   商品类型
      options: ["区域一", "区域二"],
      // 商品列表数据
      tableData: [
        {
          id: 1,
          name: "颜色",
          value: "棕色,蓝色",
          order: 50,
          status: 1,
        },
        {
          id: 2,
          name: "大小",
          value: "棕色,蓝色",
          order: 50,
          status: 1,
        },
        {
          id: 3,
          name: "外部",
          value: "棕色,蓝色",
          order: 50,
          status: 1,
        },
        {
          id: 4,
          name: "内部",
          value: "棕色,蓝色",
          order: 50,
          status: 1,
        },
        {
          id: 5,
          name: "包裹",
          value: "棕色,蓝色",
          order: 50,
          status: 1,
        },
      ],
      multipleSelection: [],
      currentPage: 1,
      dialogVisible: false,
      form: {
        name: "",
        number: 1,
        order: 50,
        status: 1,
        type: 0,
        value: "",
      },
      rules: {
        name: [
          { required: true, message: "规格名称不能为空", trigger: "blur" },
        ],
        value: [{ required: true, message: "规格值不能为空", trigger: "blur" }],
      },
      editIndex: -1,
    };
  },
  components: {
    buttonSearch,
  },
  props: {},
  created() {},
  computed: {},
  watch: {},
  methods: {
    // 批量删除
    delAll() {
      if (this.multipleSelection.length === 0) {
        return this.$message({
          message:'未选择删除项',
          type:'info'
        })
      }
      this.$confirm("是否批量删除?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.multipleSelection.forEach((item1) => {
            let index = this.tableData.findIndex(
              (item2) => item2.id === item1.id
            );
            if (index !== -1) {
              this.tableData.splice(index, 1);
            }
            this.multipleSelection = [];
          });
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    delItem(item) {
      this.$confirm("是否删除该规格?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.tableData.splice(item.$index, 1);
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    openModal(e) {
      if (!e) {
        // 初始化表单
        this.form = {
          name: "",
          number: 1,
          order: 50,
          status: 1,
          type: 0,
          value: "",
        };
        this.editIndex = -1;
      } else {
        this.form = {
          name: e.row.name,
          number: e.row.number,
          order: e.row.order,
          status: e.row.status,
          type: e.row.type,
          value: e.row.value.replace(/,/g, "\n"),
        };
        this.editIndex = e.$index;
      }
      this.dialogVisible = true;
    },
    submit() {
      this.$refs.form.validate((valid) => {
        if (!valid) return;
        let msg = "";
        // 将换行替换成逗号
        this.form.value = this.form.value.replace(/\n/g, ",");
        // 添加表单内容
        if (this.editIndex === -1) {
          this.tableData.unshift(this.form);
          msg = "添加表单内容成功";
        } else {
          // 修改表单内容  this.tableData[this.editIndex] = this.form一起修改有问题 只能单个进行修改
          let item = this.tableData[this.editIndex];
          item.name = this.form.name;
          item.number = this.form.number;
          item.order = this.form.order;
          item.status = this.form.status;
          item.type = this.form.type;
          item.value = this.form.value;
          msg = "修改表单内容成功";
        }
        this.dialogVisible = false;
        this.$message({
          message: msg,
          type: "success",
        });
      });
    },
    // 改变商品状态
    changeStatus(item) {
      item.status = item.status === 1 ? 0 : 1;
      this.$message({
        message: item.status ? "启用" : "禁用",
        type: "success",
      });
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
  },
};
</script>
<style lang="less" scoped>
.list {
  margin: -20px;
  margin-top: -8px;
  background-color: white;
}
.elFoot {
  width: 100%;
  bottom: 0;
  background-color: white;
  z-index: 10;
}
/deep/.el-dialog__body {
  padding: 15px 20px;
}
</style>
